/*
 * @Author: Siyongkun
 * @Date: 2021-07-19 15:55:28
 * @Last Modified by: Siyongkun
 * @Last Modified time: 2021-07-23 19:04:12
 */
import React, { Component } from 'react';
function SquareOverlay(center, length, color) {
  this._center = center;
  this._length = length;
  this._color = color;
}
SquareOverlay.prototype = new BMapGL.Overlay();
class index extends Component {
  getbmap() {
    let map = new BMapGL.Map('bmap'); // 创建地图实例
    let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true);
    let marker = new BMapGL.Marker(point); // 创建标注
    map.addOverlay(marker);
    // let MySquare =new SquareOverlay(map.getCenter(), 100, "red");
    // map.addOverlay( MySquare);
  }
  componentDidMount() {
    // 继承API的BMap.Overlay
    SquareOverlay.prototype.initialize = function (map) {
      // 保存map对象实例
      this._map = map;
      // 创建div元素，作为自定义覆盖物的容器
      var div = document.createElement('div');
      div.style.position = 'absolute';
      // 可以根据参数设置元素外观
      div.style.width = this._length + 'px';
      div.style.height = this._length + 'px';
      div.style.background = this._color;
      // 将div添加到覆盖物容器中
      map.getPanes().markerPane.appendChild(div);
      // 保存div实例
      this._div = div;
      // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
      // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
      return div;
    };
    SquareOverlay.prototype.draw = function () {
      // 根据地理坐标转换为像素坐标，并设置给容器
      var position = this._map.pointToOverlayPixel(this._center);
      this._div.style.left = position.x - this._length / 2 + 'px';
      this._div.style.top = position.y - this._length / 2 + 'px';
    };
    // 实现显示方法
    SquareOverlay.prototype.show = function () {
      if (this._div) {
        this._div.style.display = '';
      }
    };
    // 实现隐藏方法
    SquareOverlay.prototype.hide = function () {
      if (this._div) {
        this._div.style.display = 'none';
      }
    };
    this.getbmap();
  }
  render() {
    return <div id="bmap" style={{ width: '100%', height: '600px' }}></div>;
  }
}
export default index;
